<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화
		var ctgr = ['1/4분기', '2/4분기', '3/4분기', '4/4분기'];
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BorderColor : "#84888B",
				Type : "column"
		    },
			Credits : {
				Enabled:false
			},
			
		    Legend : {
		    	Layout : "horizontal",			// Legend 모양 설정
				Align : "center",				// Legend 가로 정렬 설정
				VerticalAlign : "bottom"		// Legend 세로 정렬 설정
		    },
		    
		    // 그래프에 마우스를 옮겼을 때 표시되는 내용
		    ToolTip: {
		    	formatter: function() {
                    return ctgr[this.point.x] + "<br>" + this.series.name + " : " + this.point.y;
		    	}
		    },
		    
		    // X축 설정
		    XAxis : {
	        	categories: ctgr
		    },
			
		    // Y축 설정
		    YAxis : [{
		    	Title : {
	 		    	Text : "목표/실적"
		    	},
		    	TickInterval:10			// 간격
		    },{
		    	Opposite:true,			// 오른쪽 Y축을 사용할 경우
		    	Title : {
	 		        Text : "달성률(%)"
	 		    },
	 		    Labels:{
	 				Formatter:function(){
	 					return this.value + "%";
	 				}
	 			},
	 			Min:0,					// 최소값
				Max:100,				// 최대값
				TickInterval:20			// 간격
		    }]
		}
		
		myChart.SetOptions(cfg);		// 위에서 설정한 옵션 적용
		
		// 데이터
		var data = [{
            Name : "목표",
            Type:"column",
            zIndex:1,
            Data : [ {Y:20},{Y:20},{Y:30}, {Y:30} ]
		},{
			Name : "실적",
            Type:"column",
            zIndex:2,
            Data : [ {Y:15},{Y:25},{Y:35},{Y:25} ]
		},{
			YAxis: 1,
            Name : "달성률",
            Type:"line",
            zIndex:3,
            Data : [10,30,70,100]
		}];
		
		myChart.SetSeriesOptions(data);
		
		myChart.Draw();
	});
	
 	function myChart_OnSearchEnd(Code, Msg) {
 		alert("조회가 완료되었습니다.");
 	}
	
</script>
<title>이중 Y축 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>	
	<div id="title">이중 Y축 예제</div>
	<div id="desc">
		설정 시, Y축을 2개로 만들고 그 중 오른쪽에 위치할 Y축에 Opposite:true 으로 설정을 한다.<br>
		조회된 데이터 중 오른쪽 Y축에 표시할 값들 안에 YAxis: 1 로 설정해준다.
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "1000px", "300px");
		</script>
	</div>
</div>
</body>
</html>